<template>
  <div v-show="dialog">
    <div class="mask" @click.self="closeDialog"></div>
    <div class="dialog">
      <div class="dialog-top">
        <div
          :class="['btn', active === 1 ? 'btn-active' : '']"
          @click="handleChange(1)"
        >
          发布端
          <SvgIcon name="send" size="24" class="ml-2" v-if="active === 1" />
        </div>
        <div
          :class="['btn', active === 2 ? 'btn-active' : '']"
          @click="handleChange(2)"
        >
          订阅端
          <SvgIcon name="star" size="24" class="ml-2" v-if="active === 2" />
        </div>
      </div>
      <div class="msg">（选项可多选）</div>
      <div class="select">
        <el-checkbox
          v-model="checkedInfo.checked1"
          label="话题A"
          size="large"
          v-if="active === 1 || topicShow === 1 || topicShow === 3"
        />
        <el-checkbox
          v-model="checkedInfo.checked2"
          label="话题B"
          size="large"
          v-if="active === 1 || topicShow === 2 || topicShow === 3"
        />
      </div>
      <div class="mt-6">
        <el-button
          type="primary"
          @click="handleComfirm"
          class="w-full"
          style="height: 60px"
          color="#3882E5"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  topicShow: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['addTopic'])

const dialog = ref(false)
const active = ref(1)

const showFn = () => {
  // 数据重置
  checkedInfo.value = { checked1: false, checked2: false }

  dialog.value = true
}

const handleChange = (stataus: number) => {
  if (props.topicShow === 0 && stataus === 2) {
    ElMessage.error('请先发布节点')
    return
  }
  // 数据清空
  checkedInfo.value = { checked1: false, checked2: false }
  active.value = stataus
}

// 选项选中状态
const checkedInfo = ref({
  checked1: false,
  checked2: false,
})

// 关闭弹窗
const closeDialog = () => {
  dialog.value = false
}

// 确定
const handleComfirm = () => {
  if (checkedInfo.value.checked1 || checkedInfo.value.checked2) {
    emit('addTopic', active.value, checkedInfo.value)
    dialog.value = false
  } else {
    ElMessage.error('请选择话题')
  }
}

defineExpose({
  showFn,
})
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1000;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 20px;
  padding: 24px;

  .dialog-top {
    display: flex;
    gap: 32px;

    .btn {
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 65px;
      height: 60px;
      font-size: 18px;
      background-color: #f5f6f8;
      border-radius: 10px;
      cursor: pointer;
      color: #b4b4ca;
      transition: all 0.3s;
      fill: #fff;
    }

    .btn-active {
      color: #fff;
      background-color: #3882e5;
    }
  }

  .msg {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #73739f;
  }

  .select {
    height: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f6f8;
    font-size: 18px;
  }
}
</style>
